<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
    <link rel="stylesheet" href="./base.css">
    <link rel="stylesheet" href="./index.css">
    <style>

    </style>
</head>

<body>
    <h2>欢迎制作渐变国旗图像</h2>
    <canvas id="canvas" width="300" height="300"></canvas>

    <form method="post" enctype="multipart/form-data">
        <div class="filebutton">
            <div class="changediv">请上传底部图片</div>
            <input type="file" class="imgFile" accept="image/jpeg, image/png, image/jpg">
        </div>
    </form>

    <button class="btn">保存为本地图片</button>

    <div class="title">
        <span>制作：小 黄 人</span>
        <span>版本：bug 版 </span>
    </div>
</body>
<script>
    // 获取画布代码提示
    /** @type {HTMLCanvasElement} */
    let canvas = document.querySelector('#canvas')
    let ctx = canvas.getContext('2d')

    let imgFile = document.querySelector('.imgFile');
    let changediv = document.querySelector('.changediv')
    let btn = document.querySelector('.btn')

    // 绘制国旗
    function guoqi() {
        // 线型渐变
        let linear = ctx.createLinearGradient(10, 10, 200, 100);
        linear.addColorStop(0, '#f02e37');
        linear.addColorStop(0.25, '#f15c5e');
        linear.addColorStop(0.5, '#f89da2');
        linear.addColorStop(0.75, "#fdd5d5");
        linear.addColorStop(1, '#fef8f8');
        ctx.fillStyle = linear;
        ctx.fillRect(0, 0, 300, 300);

        // 画大五角星
        star(50, 80, 50, 0);
        // 画小五角星
        star(130, 30, 15, Math.atan((50 - 20) / (50 - 100)) - Math.PI / 2);
        star(160, 60, 15, Math.atan((50 - 40) / (50 - 120)) - Math.PI / 2);
        star(160, 110, 15, Math.atan((50 - 70) / (50 - 120)) - Math.PI / 2);
        star(130, 140, 15, Math.atan((50 - 90) / (50 - 100)) - Math.PI / 2);

        // 绘制五角星的方法
        function star(x, y, r, deg) {
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(deg)
            ctx.beginPath();
            var x = 0,
                y = 0;
            var du = Math.PI * 4 / 5;
            for (var i = 0; i < 5; i++) {
                ctx.lineTo(Math.cos(i * du - Math.PI / 2) * r, Math.sin(i * du - Math.PI / 2) * r);
            }
            ctx.closePath();

            ctx.fillStyle = "yellow";
            ctx.fill();
            ctx.restore();
        }

    }
    guoqi();

    // 上传图片 
    imgFile.addEventListener('change', function () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        guoqi();
        ctx.globalCompositeOperation = 'multiply';

        let file = imgFile.files[0];
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            let img = new Image();
            img.src = this.result;
            img.onload = function () {
                // 四个数值参数: (距画布左边距离，距画布上面距离，设置照片宽度，设置照片高度)
                ctx.drawImage(img, 0, 0, 300, 300)
            }
        };

        changediv.innerHTML = '重新上传照片'

    })

    // 点击保存canvas内容为图片
    btn.onclick = function () {
        // 手机无法保存，无法适配
        // canvas.toBlob((blob) => {
        //     const timestamp = Date.now().toString();
        //     const a = document.createElement('a');
        //     document.body.append(a);
        //     a.download = `${timestamp}.png`;
        //     a.href = URL.createObjectURL(blob);
        //     a.click();
        //     a.remove();
        // });
        let a = document.createElement("a");
        a.download = "name"; //导出图片名称
        a.href = canvas.toDataURL("image/png");
        a.click();
        a.remove();
    }
</script>

</html>